Parent | Child | Previous | Next
 

Embedded Object

Description

The Embedded Object control allows you to incorporate other defined objects -- components, reports, A5W pages, static HTML, or an external web page-- into a UX component.

Discussion

The Embedded Object control is displayed in a window on the UX Component. The object can be a Grid, UX, or other component type, a report, an A5W page, static HTML content, or an external web page. The embedded object can be displayed immediately when the UX is shown or shown on demand by clicking a button or hyperlink.

Name
Description
Synchronize a UX Component with an Embedded UX Component

images/embedObjDlg1.png

Action Javascript

Several Action Javascript actions are available for working with Embedded objects.

Action
Description
Run a report that is embedded in a UX component using a custom filter for the report

Create a highly customized 'Search Part' for a Report. Allows you to submit a UX component that contains 'search' fields to compute a filter expression and then run the report using the computed filter expression.

Clear a Search a Grid Component that is Embedded into a UX component

For use in conjunction with the 'Search a Grid Component that is Embedded into a UX' action. Clears the search form in the UX and removes the filter from the embedded Grid.

Link a Grid that has been embedded into a UX component

Unlike the 'Search a Grid Component that is Embedded into a UX' action which applies a filter to an embedded Grid, this action Links the embedded Grid.

Search a Grid Component that is Embedded into a UX component

Create a highly customized 'Search Part' for a Grid. Allows you to submit a UX component that contains 'search' fields to compute a filter expression and then filter a Grid component that has been embedded into the UX component.

Refresh/synchronize embedded UX component

Updates the argument values in the child UX component and refreshes the data shown in List controls and other controls that are based on data Series. Also causes the embedded UX component's 'onSynchronizeDialog' (client-side) and 'onSynchronize' (server-side) events to fire.

Using JavaScript with Embedded Components

Properties and methods for embedded components can be accessed from the parent UX component using JavaScript. The UX component has several placeholders that can be used to execute methods on the embedded component:

Alias
Description
{dialog.EmbeddedUX_[UXAlias]}

Used to get the Object name of an embedded UX Component. Replace [UXAlias] with the alias you specified for the embedded UX object.

{dialog.EmbeddedGrid_[GridAlias]}

Used to get the Object name of an embedded Grid Component. Replace [GridAlias] with the alias you specified for the embedded Grid object.

{dialog.EmbeddedCustomComponent_[Alias]}

Used to get the Object name of an embedded Custom Component. This includes embedded Google Map, Video Player, Calendar, and Image Gallery components. Replace [Alias] with the alias you specified for the embedded Custom Component object.

When an Embedded Object is placed in the UX component, you must specify an Alias for the object. Specify the alias for the embedded component as part of the placeholder in your JavaScript. For example:

var getRecordsFound = function () {
    var recordsFound = {dialog.EmbeddedGrid_SearchResults}._rowsInGrid;
    alert(recordsFound + " records found!");
}

You can also use the {dialog.object}.getChildObject() method to get a pointer to an embedded component. The main benefit of using {dialog.object}.getChildObject() method over placeholders is that it makes it easier to create a dynamic UX component where the embedded object's alias may not be determined until run-time. The {dialog.object}.getChildObject() method can also be used to get a pointer to a component opened using Action Javascript. See {dialog.object}.getChildObject Method for more details.

Configuring an Embedded Object

The following properties are used to configure an Embedded Object. Not all embedded objects have all properties listed below.

Videos

Getting a Pointer to a Parent or Child Component So You Can Call Methods of the Parent or Child Component

The ability to re-use components and open a child component in a window, div, TabbedUI pane, Panel, or embed into a parent component is one of the most powerful aspects of the Alpha Anywhere architecture.

When you open a component from a parent component, you will often want to get a pointer to the child component so you can manipulate it in your Javascript code in some way. For example, you might want some code in the parent component to read a control in the child, or set a value in the child. Similarly, you might want some code in the child component to read or set a control in its parent.

The .getParentObject() and .getChildObject() methods are used to get pointer to an object's parent or child objects.

In this video, we show how this is done.

Download Component

See Also